<template>
    <section class="section-hero section-shaped my-0">
        <div class="shape shape-style-1 shape-primary">
            <span class="span-150"></span>
            <span class="span-50"></span>
            <span class="span-50"></span>
            <span class="span-75"></span>
            <span class="span-100"></span>
            <span class="span-75"></span>
            <span class="span-50"></span>
            <span class="span-100"></span>
            <span class="span-50"></span>
            <span class="span-100"></span>
        </div>
        <div class="container shape-container d-flex align-items-center">
            <div class="col px-0">
                <div class="row justify-content-center align-items-center">
                    <div class="col-lg-7 text-center pt-lg">
                        <h1 style="color: white">来租房Rental</h1>
                        <p class="lead text-white mt-4 mb-5">一个贴心的全面的租房平台</p>
                        <div class="btn-wrapper">
                            <base-button
                                         @click="open('register')"
                                         class="mb-3 mb-sm-0"
                                         type="info"
                                         icon="fa fa-users">
                                注册
                            </base-button>
                            <base-button tag="a"
                                         @click="open('login')"
                                         class="mb-3 mb-sm-0"
                                         type="white"
                                         icon="fa fa-sign-in">
                                已有账号？点此登录
                            </base-button>
                        </div>
                    </div>
                </div>
                <div class="row align-items-center justify-content-around stars-and-coded">
                    <div class="col-sm-4">
                        <span class="text-white alpha-7 ml-3">Star us on </span>
                        <a href="https://gitee.com/moglin/rentalsystem" target="_blank" title="Support us on Github">
                            <img src="img/brand/gitee.png" style="height: 50px; margin-top: -3px">
                        </a>
                        <a href="https://gitee.com/moglin/rsserver" target="_blank" title="Support us on Github">
                            <img src="img/brand/gitee.png" style="height: 50px; margin-top: -3px">
                        </a>
                    </div>
                    <div class="col-sm-4 mt-4 mt-sm-0 text-right" style="color: white">
                        <span class="text-white alpha-7">Coded by</span>
                        <a href="https://bootstrap-vue.js.org/" target="_blank" title="Bootstrap and Vue" style="color: white">
                            <strong style="color: white;"> Bootstrap</strong>
                        </a>
                         and 
                        <a href="https://cn.vuejs.org/" target="_blank" title="Bootstrap and Vue">
                            <strong style="color: white;">Vue</strong>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>
<script>
export default {
    methods:{
        open(dir){
            this.$router.push({name:dir});
        }
    }
};
</script>
<style>
</style>
